<template>
  <div>
  <!--文件上传-->
  <el-upload
    class="upload-demo"
    :action="upload_url"
    :on-preview="handlePreview"
    :before-upload="beforeUpload"
    :show-file-list="false"
    :data="params"
    :on-success="handleSuccess"
  >
    <el-button size="small" type="primary"  v-if="isShowHzd">添加回执单</el-button>
    <el-button size="small" type="primary"  v-else>{{btnName}}</el-button>
  </el-upload>
    <!--    显示图片-->
    <div class="slot">
      <el-table :data="fileList"  style="width:100%">
        <el-table-column prop="fileName" label="名称"></el-table-column>
        <el-table-column prop="ext" label="类型"></el-table-column>
        <el-table-column prop="size" label="大小"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="previewImage(scope.row)">预览</el-button>
            <el-button type="primary" size="mini" @click="downloadFile(scope.row)">下载</el-button>
            <el-button type="danger" size="mini" @click="deleteFile(scope)" v-if="isShowHzd">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  <!--      上传附件-->
    <previewPicture ref="dialogs"></previewPicture>
  </div>
</template>


<script>
  import previewPicture from "./previewPicture";
    export default {
        name: "uploadFile",
        data(){
            return {
                upload_url: this.fun.APP_VUE_UPLOAD_URL,
            }
        },
        props:['params'],
        components: {previewPicture},
        computed: {
            fileList(){
                let fileArr = [];
                if(this.params.hasOwnProperty('fileList')){
                    fileArr =  this.params.fileList
                  console.log('11111111111111111',fileArr)
                }
                return Array.from(new Set(fileArr));
            },
            btnName(){
              if(this.params.hasOwnProperty('btnName')){
                return this.params.btnName
              }else{
                 return "添加附件";
              }
            },
            isShowHzd(){
              return this.params.hasOwnProperty('show_hzd') && this.params.show_hzd
            }
        },

        methods:{
            handlePreview(file) {
                console.log(file);
            },
            handleSuccess(res,file,fileLists){
                //console.log(res.data, "res")
                let file_list = [];
                fileLists.forEach((item) => {
                    file_list.push(item.response.data)
                });
                let len = file_list.length - 1;
                this.fileList.push(file_list[len])
                this.callParentMethod(file_list)
            },

            beforeUpload(file) {
                if(this.fileList.length < 1) return true;
                let filename = ''
                this.fileList.forEach((newFile) => {
                    if(file.name == newFile.fileName){
                        filename = file.name
                    }
                });

                if(filename){
                    this.$message.error('文件' + filename + '重复');
                    return false
                }else{
                    return true;
                }
            },

            callParentMethod(file_list,id=0){
                if(this.params.hasOwnProperty('show_hzd')) {
                  console.log('hzd')
                    this.$emit('changeHzd',file_list,id)
                }else if(this.params.hasOwnProperty('dir') && this.params.dir == 'js'){
                   let fileName = this.params.name;
                   this.$emit('fileAction',file_list,fileName);
                }
                else{
                  console.log('test')
                    this.$emit('test',file_list)
                }
            },
            //预览图片
            previewImage(img){
                let ext = img.ext
                if(ext == 'doc' || ext == 'docx' || ext == 'ppt' || ext == 'pptx' || ext == 'xls' || ext == 'xlsx'){
                    this.fun.previewOffice(img.fileUrl)
                }else{
                    this.$refs.dialogs.visable=true
                    this.$refs.dialogs.img_path = img.fileUrl
                }

            },
            //下载图片
            downloadFile(file){
                let url = file.fileUrl
                let fileName = file.fileName
                this.fun.downloadFile(url,fileName)
            },

          //删除
          deleteFile(col){
              let index = col.$index;
              let file = col.row;
            console.log(file)
              this.fileList.splice(index,1);
              this.callParentMethod(this.fileList,file.id);
          }
        },
    }
</script>

<style scoped>
.upload-demo{
  display: inline-block !important;
  width:100% !important;
  text-align: left;
}
</style>
